<template>
    <div v-if="current && current.animate" class="animateMain">
        <div v-if="!current.animate.data || !Object.keys(current.animate.data).length">
            <n-button type="primary" size="tiny" @click="initAnimate">动画序列为空，点击初始化</n-button>
        </div>
        <h2>动画逐帧参数</h2>
        <div class="addFrameArea" v-if="current.animate.data && Object.keys(current.animate.data).length">
            在 <InputNumber v-model="newAnimateFrame" class="newFrameInput"></InputNumber>% 处
            <n-button type="primary" size="tiny" @click="addFrame">插入帧</n-button>
        </div>

        <n-collapse>
            <n-collapse-item
                v-for="frameKey in Object.keys(current.animate.data || {}).sort((a, b) => parseInt(a) - parseInt(b))"
                :key="frameKey" :title="frameKey" :name="frameKey">
                <div class="animate">
                    <div v-for="item in animateAttrs" :key="frameKey + item" class="animateItem">
                        <div class="animateItemKey">{{ item }}：</div>
                        <div class="animateItemValue">
                            <InputNumber v-model="current.animate.data![frameKey][item]"></InputNumber>
                        </div>
                    </div>
                </div>
            </n-collapse-item>
        </n-collapse>


        <h2>动画整体参数</h2>
        <div class="animateConfig" v-if="current.animate.data && Object.keys(current.animate.data).length">
            <n-table :bordered="false" :single-line="false">
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>参数值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in animateConfigAttr" :key="item">
                        <td>{{ item }}</td>
                        <td>
                            <InputNumber v-model="current.animate.config![item]"></InputNumber>
                        </td>
                    </tr>
                </tbody>
            </n-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import InputNumber from "../InputNumber.vue"
import { ref} from "vue";
import { useTimelineStore } from "../../store/timeline"
import { NCollapse, NCollapseItem } from 'naive-ui'
import { NTable, NButton } from 'naive-ui'
const timelineStore = useTimelineStore()
const current = timelineStore.current
let animateAttrs = ["x", "y", "w", "h", "angle", "opacity"]
let animateConfigAttr = ['duration', 'delay', 'iterCount']

const newAnimateFrame = ref(0)
function initAnimate() {
    current.animate.data = {};
    current.animate.data['0%'] = { x: '', y: '', w: '', h: '', angle: '', opacity: '' }
    current.animate.data['100%'] = { x: '', y: '', w: '', h: '', angle: '', opacity: '' }
    current.animate.config = {};
}
function addFrame() {
    if (Object.keys(current.animate.data!).includes(newAnimateFrame.value + '%')) return
    current.animate.data![newAnimateFrame.value + '%'] = { x: '', y: '', w: '', h: '', angle: '', opacity: '' }
}
</script>


<style scoped>
.animateMain {
    padding: 8px;
}

.animateStep {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.animate {
    display: flex;
    flex-wrap: wrap;
}

.animateItem {
    display: flex;
    width: 50%;
    margin: 5px 0;
}

.animateItemKey {
    width: 30%;
    text-align: right;
}

.animateItemValue {
    width: 70%;
}

.addFrameArea {
    display: flex;
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 10px 15px;
}

.newFrameInput {
    width: 40%;
}
</style>